import VuiElement from './base/element';

/**
 * 创建Div
 * @param {*} className
 * @param {*} innerText
 * @param {*} title
 * @param {*} id
 */
export function createDiv(className, innerText, title, id) {
  const elt = document.createElement('div');
  if (className) elt.className = className;
  if (innerText) elt.appendChild(document.createTextNode(innerText));
  if (title) elt.title = title;
  if (id) elt.id = id;
  return elt;
}

/**
 * 创建Span
 * @param {*} className
 * @param {*} innerText
 * @param {*} title
 * @param {*} id
 */
export function createSpan(className, innerText, title, id) {
  const elt = document.createElement('span');
  if (className) elt.className = className;
  if (innerText) elt.appendChild(document.createTextNode(innerText));
  if (title) elt.title = title;
  if (id) elt.id = id;
  return elt;
}

/**
 * 创建输入框
 * @param {Object} config 配置项
 */
export function createInput(config) {
  const defaultConfig = {
    id: '',
    className: '',
    value: '',
    name: '',
    type: 'text',
    readOnly: ''
  };
  config = Object.assign(defaultConfig, config);
  const input = document.createElement('input');
  for (const key in config) {
    const value = config[key];
    if (value !== '') {
      input[key] = value;
    }
  }
  return input;
}

/**
 * 创建标签
 */
export function createLabel(config) {
  const defaultConfig = {
    id: '',
    className: '',
    innerText: '',
    htmlFor: ''
  };
  config = Object.assign(defaultConfig, config);
  const label = document.createElement('label');
  for (const key in config) {
    const value = config[key];
    if (value !== '') {
      label[key] = value;
    }
  }
  return label;
}

/**
 * 创建选择框
 * @param {Object} config 配置项
 */
export function createSelect(config) {
  const defaultConfig = {
    id: '',
    className: '',
    value: '',
    name: '',
    enable: ''
  };
  config = Object.assign(defaultConfig, config);
  const input = document.createElement('select');
  for (const key in config) {
    const value = config[key];
    if (value !== '') {
      input[key] = value;
    }
  }
  return input;
}

/**
 * 创建选择框选项
 * @param {Object} config 配置项
 */
export function createSelectOption(config) {
  const defaultConfig = {
    id: '',
    className: '',
    value: '',
    innerText: '',
    selected: ''
  };
  config = Object.assign(defaultConfig, config);
  const input = document.createElement('option');
  for (const key in config) {
    const value = config[key];
    if (value !== '') {
      input[key] = value;
    }
  }
  return input;
}

/**
 * 创建元素
 * @param {*} tag
 * @param {*} className
 */
export function createElement(tag = 'div', className = '', id = '') {
  const elt = document.createElement(tag);
  if (className) elt.className = className;
  if (id) elt.id = id;
  return elt;
}

export function createEle(tag = 'div', config = { className: '', id: '' }) {
  const elt = document.createElement(tag);
  for (const key in config) {
    if (config[key]) {
      elt[key] = config[key];
    }
  }
  return elt;
}

/**
 * 组合元素
 * @param {HTMLElement} parent 父元素
 * @param {Array|String|HTMLElement} child 子元素
 */
export function h(parent, child) {
  if (parent instanceof HTMLElement) {
    if (child instanceof Array) {
      child.forEach(element => {
        h(parent, element);
      });
    } else if (child instanceof HTMLElement || child instanceof SVGElement || child instanceof DocumentFragment) {
      parent.appendChild(child);
    } else if (child instanceof VuiElement) {
      parent.appendChild(child.container);
    } else if (typeof child === 'string') {
      parent.appendChild(document.createTextNode(child));
    }
  }
  return parent;
}

/**
 * 设置input的值 同时触发oninput事件
 * @param {*} element
 * @param {*} value
 */
export function setInputValue(element, value) {
  const ev = new Event('input', { bubbles: true });
  ev.simulated = true;
  element.value = value;
  element.dispatchEvent(ev);
}

/**
 * 设置input的值 同时触发onchange事件
 * @param {*} element
 * @param {*} value
 */
export function setInputValueOnChange(element, value) {
  const ev = new Event('change', { bubbles: true });
  ev.simulated = true;
  element.value = value;
  element.dispatchEvent(ev);
}

// 移除其他兄弟节点class
export function removeBrotherClass(elt, className) {
  const broElts = elt.parentNode.children;
  for (let i = 0; i < broElts.length; i++) {
    const element = broElts[i];
    // 移除其他兄弟节点class
    if (element != elt && element.classList.contains(className)) {
      element.classList.remove(className);
    }
  }
}

export const IS_POINTER = window.PointerEvent != null && !(navigator.appVersion.indexOf('Mac') > 0);
/**
 * 是否为html元素
 * @param {*} elt
 */
export function isHTMLElement(elt) {
  return elt instanceof HTMLElement;
}

/**
 * 移除元素
 */
export function removeElement(elt) {
  if (isHTMLElement(elt)) {
    elt.parentElement?.removeChild(elt);
  }
}

/**
 * 替换元素
 */
export function replaceElement(oldElement, newElement) {
  if (isHTMLElement(oldElement) && isHTMLElement(newElement)) {
    oldElement.parentElement?.replaceChild(newElement, oldElement);
  }
}

/**
 * 添加className
 */
export function addClassName(elt, className) {
  if (!containsClassName(elt, className)) {
    elt.classList.add(className);
  }
}
/**
 * 移除className
 */
export function removeClassName(elt, className) {
  if (containsClassName(elt, className)) {
    elt.classList.remove(className);
  }
}

/**
 * 判断元素是否包含指定class
 * @param {*} elt
 * @param {*} className
 */
export function containsClassName(elt, className) {
  return isHTMLElement(elt) && elt.classList.contains(className);
}

export const createCheckbox = function(id, text, handler, checked = false, disabled = false) {
  const container = createDiv('page-setup-dp-item');
  const label = document.createElement('label');
  const checkbox = document.createElement('input');
  const span = document.createElement('span');

  checkbox.type = 'checkbox';
  checkbox.className = 'page-setup-dp-checkbox';
  checkbox.addEventListener('change', handler);
  checkbox.checked = checked;
  checkbox.disabled = disabled;
  checkbox.id = id || '';

  span.className = 'page-setup-dpitem-name';

  label.appendChild(checkbox);
  label.appendChild(span);
  container.appendChild(label);

  return container;
};

export const createRadio = function(id, text, name, handler, checked = false, disabled = false) {
  const label = document.createElement('label');
  const radio = document.createElement('input');
  const span = document.createElement('span');

  radio.type = 'radio';
  radio.name = name;
  radio.className = 'page-setup-dp-radio';
  radio.addEventListener('change', handler);
  radio.checked = checked;
  radio.disabled = disabled;
  radio.id = id || '';

  span.innerText = text;
  span.className = 'page-setup-dpitem-name';

  label.appendChild(radio);
  label.appendChild(span);

  return label;
};
